<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* @var $this \Magento\Framework\View\Element\Template */
?>
<script data-template-for="configurable-attribute" type="text/x-jquery-tmpl">
    <div class="entry-edit" data-role="configurable-attribute" data-attribute="${JSON.stringify(attribute)}">
        <input name="attributes[]" id="configurable_attribute_${attribute.id}"
            value="${attribute.id}" type="hidden">
        <input value="new" type="hidden"
            name="product[configurable_attributes_data][${attribute.id}]][id]"/>
        <input value="${attribute.id}" type="hidden"
            name="product[configurable_attributes_data][${attribute.id}][attribute_id]"/>
        <input value="" type="hidden"
            name="product[configurable_attributes_data][${attribute.id}][position]"/>
        <input value="${attribute.code}" type="hidden"
            name="product[configurable_attributes_data][${attribute.id}][code]"/>

        <div class="fieldset-wrapper collapsable-wrapper" id="${attribute.id}-wrapper">
            <div class="fieldset-wrapper-title">
                <strong class="title" data-toggle="collapse" data-target="#${attribute.id}-content">
                    <span>${attribute.label}</span>
                </strong>
                <div class="actions">
                    <button type="button" title="<?php echo __('Delete Variations Group')?>" class="action-delete">
                        <span><?php echo __('Delete Variations Group')?></span>
                    </button>
                </div>
                <div class="draggable-handle" title="<?php echo __('Sort Variations')?>"></div>
            </div>
            <div class="fieldset-wrapper-content collapse" id="${attribute.id}-content" data-attribute-id="${attribute.id}">
                <fieldset class="fieldset">
                    <div class="field field-variation">
                        <label class="label"><span><?php echo __('Variation Label'); ?></span></label>
                        <div class="control">
                            <input type="text" value="${attribute.label}"
                                   name="product[configurable_attributes_data][${attribute.id}][label]"
                                   data-store-label="${attribute.label}"
                                   class="store-label required-entry"/>
                        </div>
                        <div class="field-service">
                            <label for="attribute-${attribute.id}" class="use-default">
                                <input value="1"
                                       type="checkbox"
                                       class="use-default-control"
                                       name="product[configurable_attributes_data][${attribute.id}][use_default]"
                                       id="attribute-${attribute.id}"/>
                                <span class="use-default-label"><?php echo __('Use Default')?></span>
                            </label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th class="col-name"><?php echo __('Label')?></th>
                                        <th class="col-change-price"><?php echo __('Change Price')?></th>
                                        <th class="col-include"><?php echo __('Include')?></th>
                                        <th class="col-actions"><?php echo __('Delete')?></th>
                                    </tr>
                                </thead>
                                <tbody data-role="options">
                                {{each(index, option) attribute.options}}
                                <tr data-role="option-container">
                                    <td class="col-name" data-column="name">${option.label}</td>
                                    <td class="col-change-price" data-column="change-price">
                                        <input type="hidden"
                                               name="product[configurable_attributes_data][${attribute.id}][values][${option.value}][value_index]"
                                               value="${option.value}"/>

                                        <div class="field field-change-pricing">
                                            <div class="control">
                                                <div class="fields-group-2">
                                                    <div class="field field-pricing-value">
                                                        <div class="control">
                                                            <input type="text" class="pricing-value validate-number"
                                                                   name="product[configurable_attributes_data][${attribute.id}][values][${option.value}][pricing_value]"
                                                                   value=""/>
                                                        </div>
                                                    </div>
                                                    <div class="field field-pricing-measure">
                                                        <div class="actions dropdown actions-select">
                                                            <input name="product[configurable_attributes_data][${attribute.id}][values][${option.value}][is_percent]" type="hidden" value="0"/>
                                                            <button type="button" class="action toggle" data-toggle="dropdown" data-mage-init='{"dropdown":{}}'>
                                                                <span><?php echo $this->getBaseCurrency()->getSymbol() ?></span>
                                                            </button>
                                                            <ul class="dropdown" data-role="dropdown-menu" data-mage-init='{"menu":{}}'>
                                                                <li data-value="0"><a class="item"><?php echo $this->getBaseCurrency()->getSymbol() ?></a></li>
                                                                <li data-value="1"><a class="item"><?php echo __('%')?></a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="col-include" data-column="include">
                                        <div class="field choice">
                                            <input type="hidden"
                                                   name="product[configurable_attributes_data][${attribute.id}][values][${option.value}][include]"
                                                   value="0"/>
                                            <input type="checkbox" class="include"
                                                   name="product[configurable_attributes_data][${attribute.id}][values][${option.value}][include]"
                                                   value="1" checked="checked"/>
                                        </div>
                                    </td>
                                    <td class="col-actions" data-column="actions">
                                        <button type="button" class="action-locked" disabled="disabled"
                                                data-action="delete" title="<?php echo __('Delete')?>">
                                            <span><?php echo __('Delete')?></span>
                                        </button>
                                    </td>
                                </tr>
                                {{/each}}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4" class="col-actions-add"><?php echo $this->getChildHtml('add_option'); ?></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</script>
<script data-template-for="new-option" type="text/x-jquery-tmpl">
    <tr data-role="option-container">
        <td class="col-name" data-column="name">
            <div class="field">
                <div class="control">
                    <input name="product[configurable_attributes_data][${attribute.id}][values][${option.id}][label]"
                           class="required-entry" type="text"
                           placeholder="<?php echo __('begin typing to add value'); ?>" />
                </div>
            </div>
        </td>
        <td class="col-change-price" data-column="change-price">
            <div class="field field-change-pricing">
                <div class="control">
                    <div class="fields-group-2">
                        <div class="field field-pricing-value">
                            <div class="control">
                                <input type="text" class="pricing-value validate-number"
                                       name="product[configurable_attributes_data][${attribute.id}][values][${option.id}][pricing_value]" />
                            </div>
                        </div>
                        <div class="field field-pricing-measure">
                            <div class="actions dropdown actions-select">
                                <input type="hidden" value="0" name="product[configurable_attributes_data][${attribute.id}][values][${option.id}][is_percent]"/>
                                <button type="button" class="action toggle" data-toggle="dropdown" data-mage-init='{"dropdown":{}}'>
                                    <span><?php echo $this->getBaseCurrency()->getSymbol() ?></span>
                                </button>
                                <ul class="dropdown" data-role="dropdown-menu" data-mage-init='{"menu":{}}'>
                                    <li data-value="0"><a class="item"><?php echo $this->getBaseCurrency()->getSymbol() ?></a></li>
                                    <li data-value="1"><a class="item"><?php echo __('%')?></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class="col-include" data-column="include">
            <div class="field choice">
                <input type="hidden"
                       name="product[configurable_attributes_data][${attribute.id}][values][${option.id}][include]"
                       value="0"/>
                <input type="checkbox" class="include"
                       name="product[configurable_attributes_data][${attribute.id}][values][${option.id}][include]"
                       value="1" checked="checked"/>
            </div>
        </td>
        <td class="col-actions" data-column="actions">
            <button type="button" class="action-delete" data-action="delete"
                    title="<?php echo __('Delete'); ?>">
                <span><?php echo __('Delete'); ?></span>
            </button>
        </td>
    </tr>
</script>
